<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>消息</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="./dist/css/AdminLTE.min.css">


</head>
<body class="">

  <div id="im-bot-app" >
    <!-- DIRECT CHAT PRIMARY -->
    <div  class="box box-primary direct-chat direct-chat-primary">
      <div class="box-header with-border">
        <h3 class="box-title">谨信会计</h3>

        <div class="box-tools pull-right">
      
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <!-- /.box-header -->
      <div class="box-body" style="margin: 15px">
        <div id="box-chat-position" style="height: 300px;overflow-y:scroll;">
          <div id="box-chat-position-inner" >

            <div v-for="message in userMessage">
              <div v-IF="message.type" class="direct-chat-msg">

                <div class="direct-chat-info clearfix">
                  <span class="direct-chat-name pull-left">{{ message.user }}</span>
                  <span class="direct-chat-timestamp pull-right">{{ message.time }}</span>
                </div>
                <!-- /.direct-chat-info -->
                <img class="direct-chat-img" src="./dist/img/avatar5.png" alt="Message User Image"><!-- /.direct-chat-img -->
                <div style="width: 40%;" class="direct-chat-text">
                  {{ message.message }}
                </div>
                <!-- /.direct-chat-text -->
              </div>

              <div  v-else class="direct-chat-msg right">
                <div class="direct-chat-info clearfix">
                  <span class="direct-chat-name pull-right">{{ message.user }}</span>
                  <span class="direct-chat-timestamp pull-left">{{ message.time }}</span>
                </div>
                <!-- /.direct-chat-info -->
                <img class="direct-chat-img" src="./dist/img/avatar3.png" alt="Message User Image"><!-- /.direct-chat-img -->
                <div style="width: 40%;float: right" class="direct-chat-text">
                  {{ message.message }}
                </div>
                <!-- /.direct-chat-text -->
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- /.box-body -->
      <div class="box-footer">
          <div class="input-group">
            <input  id="sendMessageInput" type="text" v-model="newMessage.message" name="message" placeholder="消息 ..." class="form-control">
                <span  class="input-group-btn">
                  <button  type="button" @click="sendMessage" class="btn btn-primary btn-flat">发送</button>
                </span>
          </div>
      </div>
      <!-- /.box-footer-->
    </div>
    <!--/.direct-chat -->
  </div>


  <!-- jQuery 2.2.3 -->
  <script src="./dist/js/jquery-2.2.3.min.js"></script>
  <!-- Bootstrap 3.3.6 -->
  <script src="./dist/js/bootstrap.min.js"></script>

  <script src="./dist/js/vue.js"></script>
  <script src="./dist/js/ImBot.js"></script>
  <script>
    window.onload=function(){

      var vm = new Vue({
        el: '#im-bot-app',
        data: {
          newMessage: {
            message : ''
          },
          userMessage: [

          ]
        },
        methods:{
          sendMessage: function(){
            if(!this.newMessage.message){
              return ;
            }
            var vueObject = this;
            //用户的新消息
            userMessagePush(vueObject);

            //接受机器人消息
            userMessageSend(vueObject,vueObject.newMessage.message);

            //重置消息框
            this.newMessage = {message : ''};
          }
        }

      });

      //接待消息
      userMessageSend(vm,'请接待');


      $("#im-bot-app").bind("keydown",function(e){
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
          if(vm.newMessage.message){
            userMessagePush(vm);
            userMessageSend(vm,vm.newMessage.message);

            //重置消息框
            vm.newMessage = {message : ''};
          }
        }
      });

    };


    function userMessageSend(vueObject,newMsmContent) {

      var message = {
        name: '谨信助理',
        message: '',
        time : getTime(),
        type: 'bot'
      };


      var requestData = {
        key     :   BOT_KEY,
        userid  :   'bot-test',
        info    :   newMsmContent,
        loc     :   '广州市'
      };

      $.post(BOT_API_URL,requestData,function(msg){
        message.message = getResponse(msg);

        vueObject.userMessage.push(message);

        //自动定位到最新发送的消息那
        $('#box-chat-position').animate({scrollTop:$('#box-chat-position-inner').height()+'px'},500)	;
      });

    }

    /**
     * 显示用户发的消息
     * @param vueObject
     */
    function userMessagePush(vueObject) {
      var myMessage = {
        name: '客户',
        message: vueObject.newMessage.message,
        time : getTime(),
        type: ''
      };
      vueObject.userMessage.push(myMessage);
    }


  </script>

</body>
</html>
